<template>
<div>
  hello-{{resp}}-{{num}}
  <div id="graph" style="width: 500px;height: 300px"></div>
  <div id="myGraph" style="width: 500px;height: 300px"></div>
  <button @click="numAdd">加</button>
  <button @click="out">输出</button>
</div>
</template>

<script >
import * as echarts from 'echarts';
import axios from "axios";
import {ref, onMounted} from 'vue';

export default {
  name: "GraphOne",
  setup(){
    let data = ref(null)
    let links = ref(null)
    let resp = ref(null)
    let num = ref(0)


   onMounted(()=>{
     getData()
     showGraph()
     showMyGraph()
   })

    //使用axios发送一个get请求
    function getData() {
      axios.get('/api/graph/findAll').then((res)=>{
        // console.log(resp.data);
        // data.value = resp.data.data ;
        // links.value= resp.data.links ;
        // console.log("getdata" , data.value)
        // console.log("getdata" , links.value)
        resp.value = res
      })
    }
    // getData = async ()=>{
    //     axios.get('/api/graph/findAll').then((res)=>{
    //       // console.log(resp.data);
    //       // data.value = resp.data.data ;
    //       // links.value= resp.data.links ;
    //       // console.log("getdata" , data.value)
    //       // console.log("getdata" , links.value)
    //       resp.value = res
    //     })
    // }

    const numAdd = () => {
      num.value = num.value + 1
    }

    function showMyGraph() {
      console.log(resp.value)

    }
    // const showMyGraph = ()=> {
    //   console.log(resp.value)
    //   //console.log(data.value)
    //   // var myChart = echarts.init(document.getElementById('myGraph'));
    //   // var option = {
    //   //   title: {
    //   //     text: 'Basic Graph'
    //   //   },
    //   //   tooltip: {},
    //   //   animationDurationUpdate: 1500,
    //   //   animationEasingUpdate: 'quinticInOut',
    //   //   series: [
    //   //     {
    //   //       type: 'graph',
    //   //       layout: 'none',
    //   //       symbolSize: 50,
    //   //       roam: true,
    //   //       label: {
    //   //         show: true
    //   //       },
    //   //       edgeSymbol: ['circle', 'arrow'],
    //   //       edgeSymbolSize: [4, 10],
    //   //       edgeLabel: {
    //   //         fontSize: 20
    //   //       },
    //   //       data:data.value,
    //   //       links:links.value,
    //   //       lineStyle: {
    //   //         opacity: 0.9,
    //   //         width: 2,
    //   //         curveness: 0
    //   //       }
    //   //     }
    //   //   ]
    //   // };
    //   // myChart.setOption(option)
    //   // //vue3里面使用双向绑定
    //   // console.log(option)
    //
    // }


    const out = ()=>{
      console.log(num.value)
    }


    const showGraph = ()=>{
      var myChart = echarts.init(document.getElementById('graph'));
      var option = {
        title: {
          text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: [
              {
                name: 'Node 1',
                x: 300,
                y: 300
              },
              {
                name: 'Node 2',
                x: 800,
                y: 300
              },
              {
                name: 'Node 3',
                x: 550,
                y: 100
              },
              {
                name: 'Node 4',
                x: 550,
                y: 500
              }
            ],
            // links: [],
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                  show: true
                },
                lineStyle: {
                  width: 5,
                  curveness: 0.2
                }
              },
              {
                source: 'Node 2',
                target: 'Node 1',
                label: {
                  show: true
                },
                lineStyle: {
                  curveness: 0.2
                }
              },
              {
                source: 'Node 1',
                target: 'Node 3'
              },
              {
                source: 'Node 2',
                target: 'Node 3'
              },
              {
                source: 'Node 2',
                target: 'Node 4'
              },
              {
                source: 'Node 1',
                target: 'Node 4'
              }
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };
      myChart.setOption(option)
    }

    return{
      data,
      links,
      resp,
      num,
      getData,
      showMyGraph,
      numAdd,
      out
    }
 },

}
</script>

<style scoped>

</style>
